<template>
  <div class="searchHistory">
    <van-cell title="搜索历史" >
      <template>
        <van-icon name="delete-o" @click="isDelete = true" v-if="!isDelete"/>
        <div class="right_box" v-else>
          <!-- 第一种子元素清空历史法 -->
          <!-- <span @click="histor.splice(0)">全部删除</span> -->
          <!-- 第二种清空法 -->
          <span @click="$emit('delQb')">全部删除</span>
          <span class="btn_spa" @click="isDelete =false">完成</span>
        </div>
      </template>
    </van-cell>
    <!-- 历史内容 -->
    <van-cell :title="item" v-for="item in histor" :key="item" @click="onSearchHistory(item)">
      <template v-if="isDelete">
        <van-icon name="close" />
      </template>
    </van-cell>
  </div>
</template>

<script>
export default {
  props: {
    histor: {
      type: Array,
      require: true
    }
  },
  data () {
    return {
      isDelete: false
    }
  },

  created () {

  },

  methods: {
    onSearchHistory (val) {
      if (this.isDelete) {
        const index = this.histor.indexOf(val)
        this.histor.splice(index, 1)
      } else {
        this.$emit('onsht', val)
      }
    }
  }
}
</script>

<style scoped lang='less'>
.searchHistory {
  .right_box {
    // .btn_spa {
    //   padding-left: 7px;
    // }
    span:nth-child(2) {
      padding-left: 10px;
    }
  }
}
</style>
